import Vue from 'vue'
import Vuex from 'vuex'

// 导入axios请求函数
import {
  newSongApi, hotSongApi,
  listSearchApi, exactApi,
  musicCommentApi
} from '@/api/index.js'

Vue.use(Vuex)

const state = { // 存放共享数据
  newSongList: [], // 歌曲列表
  searchValue: '', // 搜索框的值
  hotList: [], // 热搜列表数据
  searchList: [], // 搜索歌曲列表
  isNull: true, // 当前是否请求为空
  ables: true, // 搜索防抖
  authorId: 1, // 作者ID
  songInfo: [], // 歌手信息
  commentList: [], // 歌曲评论列表
  page: 1, // 评论页数
  limit: 20 // 请求的评论数
}

const actions = { // 响应组件动作，处理业务逻辑
  async getHotMusic (contxt) { // 获取热搜列表
    const { data } = await hotSongApi()
    contxt.state.hotList = data.result.hots
  },
  changSearch (contxt, value) { // 将点击的热搜值变成搜索框值
    contxt.commit('CHANG_SEARCH', value)
  },
  async searchSong (contxt, value) { // 获取搜索框内歌曲列表
    const { data } = await listSearchApi(value)
    if (data.code !== 400) {
      contxt.commit('SONG_LIST', data.result.songs) // 存储查到的数据
      // console.log(data.result.songs[0].ar[0].id)
      contxt.commit('SAVE_AUTHOR', data.result.songs[0].ar[0].id) // 给上面精确匹配传递歌手id
      contxt.commit('IS_NULL', false) // 确认当前可以显示组件数据
    } else {
      contxt.commit('IS_NULL', true)
      console.log('暂无结果')
    }
  },
  async getNewSong (contxt) { // 获取最新歌曲
    const { data } = await newSongApi()
    contxt.commit('SONG_LIST', data.result)
  },
  async exactSongs (contxt) { // 获取歌手信息
    const { data: songInfo } = await exactApi(contxt.state.authorId)
    contxt.commit('EXACT_INFO', songInfo.artist)
  },
  async musicComment (contxt, id, limit, offset) { // 获取歌曲的评论
    // console.log(limit, offset)
    const { data } = await musicCommentApi(id, limit, offset)
    contxt.commit('HOT_COMMENT', data.comments)
  }
}

const mutations = { // 操作数据
  CHANG_SEARCH (state, value) {
    // 修改搜索框的值
    state.searchValue = value
  },
  // SEARCH_LIST (state, value) {
  //   // state.searchList = value
  //   state.newSongList = value
  // },
  IS_NULL (state, value) {
    state.isNull = value
  },
  SONG_LIST (state, value) {
    state.newSongList = value
  },
  SAVE_AUTHOR (state, value) {
    state.authorId = value
  },
  EXACT_INFO (state, value) { // 存储精确匹配歌手信息
    state.songInfo = value
  },
  HOT_COMMENT (state, value) { // 热门评论
    state.commentList.push(...value)
  },
  PAGE_UP (state) {
    state.page++
  },
  REST_DATA (state) { // 重置数组中数据
    state.page = 1
    state.commentList = []
  }
}

const getters = { // 对数据进行操作后返回（计算属性）
}

const modules = { // 模块化对象
}

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters,
  modules
})
